<template>
  <div class="article">
    <div class="image" :style="{ background: `url(${best.url}) no-repeat left center` }">
    </div>
    <div class="content">
      <p class="title">{{ best.name }}</p>
      <p class="description">
        {{ best.description }}
      </p>
      <div class="author">
        <div class="span">
          <span>{{ best.lecturer }}</span>
          <span>更新日期：2021-11-16</span>
          <p>
            <span class="score">3分</span><a-rate :value="3" disabled /><span class="score">(1000人评价)</span>
          </p>
        </div>
        <div class="price">
          <span class="spans">总共32.5小时·227个讲座-所有视频</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['best'])
const best = props.best[0]
</script>

<style scoped lang="scss">
.article {
  display: flex;
  justify-content: space-between;
  padding: .625rem;
  cursor: pointer;
  background-color: #fff;

  p {
    margin: 0;
  }

  .image {
    width: 28%;
    height: auto;
    object-fit: contain;
    border-radius: .3125rem;
  }

  .content {
    width: 70%;
    padding: .625rem 0;

    .title {
      overflow: hidden;
      font-size: 1.5rem;
      font-weight: bold;
      color: #000;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .description {
      width: 80%;
      margin: 1.25rem 0;
      overflow: hidden;
      line-height: 1.625rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .author {
      padding: .625rem;

      .span {
        padding-bottom: 1.875rem;

        span {
          display: inline-block;
          margin-right: .3125rem;

        }

        span:nth-child(2) {
          margin-left: .625rem;
          font-size: .875rem;
          color: $educ-color-primary;
        }

        p {
          display: flex;
          align-items: baseline;
          margin-top: .3125rem;
          font-size: .75rem;

          .score {
            margin-right: .3125rem;
          }

          span:nth-child(3) {
            margin-left: .625rem;
            color: #999;
          }

        }
      }

      .spans {
        margin-right: .625rem;
        font-size: .75rem;
        color: #999;
      }

      button {
        padding: .25rem;
        font-size: .75rem;
        color: #999;
        border: none;
      }

      .price {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price-num {
          color: red;
        }
      }
    }
  }
}

@media screen and (width <=48rem) {
  .article {
    .image {
      display: none;
    }

    .content {
      width: 100%;

      .description {
        width: 100%;
      }
    }
  }
}
</style>
